<template>
  <div class="card-total" :class="{ whiteColor: color === 'white' }">
    <span class="card-total__value">{{ price }}</span>
    <span class="card-total__unit">{{ unit }}</span>
    <ve-icon class="card-total__arrow" v-if="clickable" name="rs_right" size="32"></ve-icon>
  </div>
</template>

<script setup name="CardTotal">
  import { computed } from 'vue'
  import { formatNumber } from '@/utils/index'
  const props = defineProps({
    value: [String, Number],
    unit: {
      type: String,
      default: '元',
    },
    thousandth: {
      type: Boolean,
      default: false,
    },
    clickable: Boolean,
    color: String, // defalut, white
  })

  const price = computed(() => {
    let val = Number(props.value) || 0
    if (props.unit != '元') return val
    return formatNumber(val, props.thousandth)
  })
</script>

<style lang="less" scoped>
  .card-total {
    .card-total__value {
      font-weight: 600;
      font-size: 40rpx;
      color: #1890ff;
      line-height: 48rpx;
    }
    .card-total__unit {
      font-weight: 400;
      font-size: 24rpx;
      color: #1d2129;
      line-height: 28rpx;
      margin-left: 8rpx;
    }
    .card-total__arrow {
      margin-top: -2rpx;
      margin-left: -4rpx;
    }
    &.whiteColor {
      .card-total__value {
        color: #fff;
      }
      .card-total__unit {
        color: #fff;
      }
    }
  }
</style>
